import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'

import action from '../store/actions/home'
const Home = connect((state) => {
  return {
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      dispatch(action.getBannerListAction) // 因为没有参数，所以不加()
    },
    getProList () {
      dispatch(action.getProListAction({ count: 2, limitNum: 3 }))  // 因为有参数，所以加()
    }
  }
})(({ bannerList, proList, getBannerList, getProList }) => {
  useEffect(() => {
    getBannerList()
    getProList()
  }, [getBannerList, getProList])
  return (
    <div>
      <h1>首页</h1>
      <ul>
        {
          bannerList && bannerList.map(item => (
            <img src = { item.img } key = { item.bannerid } alt="" style={{ height: 60 }}></img>
          ))
        }
      </ul>

      <ul>
        {
          proList && proList.map(item => (
            <li key = { item.proid }>{ item.proname }</li>
          ))
        }
      </ul>
    </div>
  );
});

export default Home;